<template>
    <van-popup round v-model="popShow" position="bottom" :style="{ width:'100%'}">
        <div class="title">{{popTitle}}</div>
        <van-form v-if="!isForm" @submit="formSubmit">
            <van-field v-if="isFirstField" v-model="value1" :label="firstFieldLabel" :rules="[{ validator:validator1,message:message1}]" />
            <van-field v-if="isSecondField" v-model="value2" :label="secondFieldLabel" :rules="[{ validator:validator2,message:message2}]" />
            <div style="margin: .16rem;">
                <van-button color="#EF7A4E" round block type="info" native-type="submit">修改</van-button>
            </div>
        </van-form>
        <div class="info" v-if="isRealTimeClock">以设备系统时间设置笔的RTC</div>
        <div class="pressure-sensor" v-if="isPressureSensor">
            <div :class="{'checked':i===sensorChecked}" class="pressure-sensor-item" v-for="i in sensor" :key="i" @click="setPressureSensor(i)">{{i}}</div>
        </div>
        <van-button color="#EF7A4E" style="margin-top: .16rem;" v-if="isForm&&!isPressureSensor" round block type="info" @click="reviseRealTimeClock">校正</van-button>
    </van-popup>
</template>

<script>
    import { mapGetters } from 'vuex';
    import * as DataName from '../../utils/dataName';
    export default {
        props: {
            show: {
                type: Boolean,
                required: true
            },
            title: {
                type: String,
                required: true
            },
            value: {
                required: true
            }
        },
        data() {
            return {
                message1: '',
                message2: '',
                sensorChecked: 1,
                sensor: [0, 1, 2, 3, 4],
                value1: '',
                value2: '',
            }
        },
        computed: {
            ...mapGetters(['bluetooth']),
            popShow: {
                get({ show }) { return show },
                set(newVal) {
                    this.$emit('update:show', newVal)
                }
            },
            isFirstField({ title }) { return title !== DataName.RealTimeClock },
            isSecondField({ title }) { return title === DataName.BuzzerChirp },
            isForm({ title }) { return title === DataName.PressureSensor || title === DataName.RealTimeClock },
            isPressureSensor({ title }) { return title === DataName.PressureSensor },
            isRealTimeClock({ title }) { return title === DataName.RealTimeClock },
            popTitle({ title }) {
                switch (title) {
                    case DataName.BluetoothName:
                        return '修改笔名'
                        break;
                    case DataName.CustomerId:
                        return '修改客户ID'
                        break;
                    case DataName.RealTimeClock:
                        return '校正RTC'
                        break;
                    case DataName.BuzzerChirp:
                        return '设置蜂鸣器鸣叫'
                        break;
                    case DataName.AutoShutdownTime:
                        return '修改自动关机时间'
                        break;
                    case DataName.PressureSensor:
                        return '设置灵敏度'
                        break;
                }
            },
            firstFieldLabel({ title }) {
                switch (title) {
                    case DataName.BluetoothName:
                        return '笔名'
                        break;
                    case DataName.CustomerId:
                        return '客户ID'
                        break;
                    case DataName.BuzzerChirp:
                        return '间隔'
                        break;
                    case DataName.AutoShutdownTime:
                        return '自动关机时间'
                        break;
                }
            },
            secondFieldLabel({ title }) {
                switch (title) {
                    case DataName.BuzzerChirp:
                        return '鸣叫'
                        break;
                }
            },
            //获取penData
            penData() {
                return (label) => {
                    return this.$store.state.mobilePenDataList.find(i => i.label === label).value
                }
            },
        },
        watch: {
            value(newVal) {
                console.log(this.title, newVal);
                switch (this.title) {
                    case DataName.BluetoothName:
                        this.value1 = newVal
                        break;
                    case DataName.AutoShutdownTime:
                        this.value1 = parseInt(newVal)
                        break;
                    case DataName.PressureSensor:
                        this.sensorChecked = Number(newVal)
                        break;
                }
            },
            show(newVal) {
                if (!newVal) {
                    this.value1 = ""
                    this.value2 = ""
                }
            }
        },
        methods: {
            validator1(value) {
                switch (this.title) {
                    case DataName.BluetoothName: {
                        if (value === '') {
                            this.message1 = '笔名不能为空!'
                            return false
                        }
                        break;
                    }
                    case DataName.CustomerId: {
                        if (value === '') {
                            this.message1 = '客户ID不能为!'
                            return false
                        }
                        break
                    }
                    case DataName.BuzzerChirp: {
                        if (value === '') {
                            this.message1 = '间隔时间不能为!'
                            return false
                        }
                        if (isNaN(value)) {
                            this.message1 = '请输入数字!'
                            return false
                        }
                        if (value < 200 || value > 65535) {
                            this.message1 = '请输入200-65535内的数字!'
                            return false
                        }
                        break
                    }
                    case DataName.AutoShutdownTime: {
                        if (isNaN(value)) {
                            this.message1 = '请输入数字!'
                            return false
                        }
                        if (value < 0 || value > 120) {
                            this.message1 = '请输入0-120以内的数字!'
                            return false
                        }
                        break;
                    }
                }
            },
            validator2(value) {
                switch (this.title) {
                    case DataName.BuzzerChirp: {
                        if (value === '') {
                            this.message2 = '鸣叫次数不能为空!'
                            return false
                        }
                        if (isNaN(value)) {
                            this.message2 = '请输入数字!'
                            return false
                        }
                        if (value < 1 || value > 255) {
                            this.message2 = '请输入1-255内的数字!'
                            return false
                        }
                        break
                    }
                }
            },
            //设置灵敏度
            setPressureSensor(value) {
                this.sensorChecked = value
                this.bluetooth.setPressureSensor(value)
                this.$emit('update:show', false)
            },
            //校正RTC
            reviseRealTimeClock() {
                this.bluetooth.setRealTimeClock()
                this.$emit('update:show', false)
            },
            formSubmit() {
                console.log(this.value1);
                switch (this.title) {
                    case DataName.BluetoothName:
                        this.bluetooth.setBluetoothName(this.value1)
                        break;
                    case DataName.CustomerId:
                        // this.bluetooth.setCustomerId(this.value1)
                        break;
                    case DataName.BuzzerChirp:
                        this.bluetooth.setBuzzerChirp(Number(this.value2), Number(this.value1))
                        break;
                }
                this.$emit('update:show', false)
            }
        }
    }
</script>


<style lang="less" scoped>
    .van-popup {
        padding: .2rem;
        display: flex;
        flex-direction: column;

        .title {
            color: #646566;
            padding: .1rem .16rem;
            font-size: .24rem;
        }

        .info {
            color: #646566;
            padding: .1rem .16rem;
            font-size: .18rem;
        }

        .pressure-sensor {
            padding: .3rem 0;
            display: flex;
            align-items: center;
            justify-content: space-evenly;

            .pressure-sensor-item {
                width: 1rem;
                height: 1rem;
                line-height: 1rem;
                text-align: center;
                border-radius: .16rem;
                background-color: #FBF3F1;
                font-size: .2rem;
            }

            .checked {
                background-color: #F07B4E;
                color: #ffffff;
            }
        }
    }
</style>